<template>

  <div class="Page Confirm">
    <div class="Title">
      <h1 class="fl f18">订单确认</h1>
      <div class="clear"/>
    </div>
    <table class="GoodList">
      <tbody>
      <tr class="good">
        <td class="name First">
          <el-row style="width: 100%">
            <el-col :span="5">
              <a :href="'/course/'+order.courseId" target="_blank">
                <img :src="order.courseCover">
              </a>
            </el-col>
            <el-col :span="15">
              <el-row style="margin-bottom: 14px">
                <p class="c-999">标题</p>
                <a :href="'/course/'+ order.courseId" target="_blank" class="fsize18">{{ order.courseTitle }}</a>
              </el-row>
              <el-row>
                <p class="c-999">讲师</p>
                <a :href="'/teacher/'+ order.teacherId" target="_blank" class="fsize18">{{ order.teacherName }}</a>
              </el-row>
            </el-col>
            <el-col :span="4" style="height: 100px">
              <el-row>
                <p class="c-999">下单时间</p>
                <span class="fsize18">{{ order.gmtCreate }}</span>
              </el-row>
              <el-row>
                <span class="c-yellow fsize24 f-fM" style="line-height: 100px">
                ￥<strong>{{ order.totalFee }}</strong>
                </span>
              </el-row>
            </el-col>
          </el-row>
        </td>
      </tr>
      </tbody>
    </table>
    <div class="Finish">
      <div class="check fr">
        <el-checkbox v-model="agree">我已阅读并同意<a href="javascript:" target="_blank">《霍森学院购买协议》</a></el-checkbox>
      </div>
      <div class="clear"/>
      <div class="Main fl">
        <div class="fl">
          <a :href="'/course/'+order.courseId">返回课程详情页</a>
        </div>
      </div>
      <el-button :disabled="!agree" type="danger" @click="pay(order.orderNo)">点击支付</el-button>
      <div class="clear"/>
    </div>
  </div>
</template>

<script>
import orderApi from '~/api/order'

export default {
  data() {
    return {
      order: {},
      agree: true
    }
  },
  created() {
    orderApi.queryById(this.$route.params.id).then(response => {
      this.order = response.data.item
    })
  },
  methods: {
    pay(orderNo) {
      orderApi.update(orderNo).then(response => {
        this.$alert('购买课程成功', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            window.location.href = '/course/' + this.order.courseId
          }
        })
      })
    }
  }
}
</script>

<style>

</style>
